import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, NavLink, Redirect } from 'react-router-dom';

import Home from './Home';
import About from './About';

import './index.css';

export default class ReactRouterParams extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="row">
          <ul className="nav nav-pills">
            <li className="nav-item">
              <NavLink className="nav-link" to="/about">About</NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/home">Home</NavLink>
            </li>
          </ul>
        </div>
        <div className="panel">
          <Switch>
            <Route path="/about" component={About} exact />
            <Route path="/home" component={Home} />
            <Redirect to="/about" />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}
